<!-- 产品中心 -->
<template>
	<view class="product">
		<home :clickColorIndex="1"></home>
		<view class="product_center">
			<view class="product_center_menu">
				<view class="product-category-title">
					<label>
						<uni-icons type="list" size="16" color="#666"></uni-icons>
					</label>
					<label>
						产品分类
					</label>
				</view>
				<view class="product-category-list clearfix">
					<TreeMenu ref="treeMenu" :currentActive="transferId" :collapseItems="collapseData" @clickEmit='emitFun'>
					</TreeMenu>
				</view>
				
			</view>
			<!-- 右侧部分 -->
			<view class="container">
				<view :class="['search',isSearchCeiling?'searchCeiling':'']">
					<view class="breadcrumb">
						<uni-breadcrumb separator=">">
							<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
								{{route.name}}
							</uni-breadcrumb-item>
						</uni-breadcrumb>
					</view>

					<view class="search-bar">
						<view class="search-imput">
							<input v-model="searchKeyword" type="text" placeholder="请输入搜索关键词" />
							<uni-icons class="search-icons" color="#999" type="search" size="30"
								@click="changePassword(searchKeyword)"></uni-icons>
						</view>
					</view>
				</view>
				
				<view class="product-list" ref="scrollContainer">
					<view v-show="products.length>0" class="product-item" @click.stop="goDetails(product)"
						v-for="(product, index) in products" :key="index">
						<view class="product-new iconfont icon-xinpin" v-if="index<3">
							<text class="xinpin_text">新品</text>
						</view>
						<image :src="product.images[0].url" class="product-image" mode="aspectFill" />
						<view class="product-info">
							<view class="product-name ellipsis">{{ product.title }}</view>
							<view class="product-param left">
								<label v-for="(item,index) in product.param[0].feature">
								<span></span><span class="ellipsis">{{item}}</span>
								</label>
							</view>
							<view class="product-button left">
								查看{{product.param.length}}款同类型商品
							</view>
						</view>
					</view>
					<view class="noData" v-show="products.length<1">
						<image class="noDataImg"
							src="https://mp-5a81006c-e233-49f0-8a6a-cb59bcd34a71.cdn.bspapp.com/avatar/wujilu.png"
							mode="aspectFill" />
						<text>暂无任何商品信息</text>
					</view>
				</view>
				<view v-if="loading" class="loading">加载中...</view>
				<view v-if="noMoreData" class="no-more-data">没有更多数据了</view>
			</view>
		</view>

		<view class="modal" v-if="showModal">
			<view class="modal-content">
				<view class="popup-header">规格清单
					<view class="close iconfont icon-guanbijiantou" @click="clickClose"></view>
				</view>
				<productForm :menuToolData="menuToolData" :param="param" :goods_id="paramId"></productForm>
			</view>
		</view>


		<!-- <guarantee></guarantee> -->
		<!-- <footing></footing> -->
		<menu-tool v-if="!showModal" ref="menuTool" @positionData="positionDataFun"></menu-tool>
	</view>
</template>

<script>
	import {
		getCategory,
		goods,
		relatedGoods
	} from '../../utils/http_data.js';
	export default {
		data() {
			return {
				routes: [{
					to: "",
					name: "工术商城",
				}, {
					to: "",
					name: "产品中心",
				}, {
					to: "",
					name: "产品列表",
				}, ],
				selectedMenu: '', // 选中的菜单
				collapseData: [],
				produ: [{
					image: '/static/images/classification01.png', // 替换为实际图片路径
					name: '法兰转接件',
					price: '82.55'
				}],
				products: [{
					image: '/static/images/classification01.png', // 替换为实际图片路径
					name: '法兰转接件',
					price: '82.55'
				}],


				// scrolled: 0, // 已滚动距离
				// remaining: 0, // 剩余触底距离
				// maxScrollTop: 0 ,// 最大可滚动距离

				// items: [], // 存储列表数据
				loading: false, // 加载状态
				noMoreData: false, // 是否没有更多数据
				page: 1, // 当前页码

				showModal: false, // 显示弹窗
				isSearchCeiling: false, // 是否吸顶
				transferId: '', // 要突出显示的菜单
				searchKeyword: '', // 要搜索的文字内容
				param: null, // 弹窗数据
				menuToolData: null, // 购物车坐标
				paramId: {}, // id
			}
		},
		created() {},
		onReachBottom(val) {
			console.log('下一页了:', val);
			if (!this.searchKeyword && !this.selectedMenu._id) {
				this.loadMoreData(); // 加载更多数据
			}
		},
		onPageScroll(val) {
			// console.log('onPageScroll:', val);
			if (val.scrollTop > 50) {
				this.isSearchCeiling = true;
			} else {
				this.isSearchCeiling = false;
			}
		},
		onLoad(option) {
			console.log('传递的参数：', option); //打印出上个页面传递的参数。
			this.transferId = option;
			if (option.searchKeyword) {
				this.searchKeyword = option.searchKeyword
				this.changePassword(this.searchKeyword)
			}
			if (option._id) {
				this.selectedMenu = option
				this.relatedGoodsFun(option)
			}
			if (option.name) {
				this.routes[2].name = option.name
			}
		},
		mounted() {
			this.getCategoryfun()
			if (!this.searchKeyword && !this.selectedMenu._id) {
				this.goodsfun(this.page)
			}
		},

		methods: {

			positionDataFun(val) {
				this.menuToolData = val;
			},
			//查询分类菜单
			getCategoryfun() {
				getCategory().then((data) => {
					this.collapseData = data.data;
				})
			},
			//查询指定分类下的所有数据
			relatedGoodsFun(val) {
				relatedGoods({
					id: val._id
				}).then((data) => {
					console.log('相关产品数据：', data)
					this.products = data;
				}).catch((err) => {
					console.log('err::::', err)
				})
			},
			//查询右侧所有数据
			goodsfun(pageNum) {
				console.log('要加载的页数pageNum::', pageNum)
				goods({
					pageNum: pageNum,
					orderByField: 'title,images,param,poster'
				}).then((data) => {
					console.log('产品信息列表：', data)
					if (data.data.length < 20) {
						this.noMoreData = true;
					}
					if (this.page > 1) {
						this.products = this.products.concat(data.data)
					} else {
						this.products = data.data;
					}
					this.loading = false;

				})
			},


			clickClose() {
				this.showModal = false
			},
			goDetails(val) {
				console.log('000:', val);
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?_id=' + val._id
				});
			},
			showModalFun(val) {
				console.log(val);
				this.paramId = {
					_id: val._id
				}
				console.log('11111', this.paramId)
				this.param = val;
				this.showModal = true;
				console.log('this.param:::', this.param)
				console.log('this.paramId:::', this.paramId)
			},

			loadMoreData() {
				if (this.loading || this.noMoreData) return;
				this.loading = true;
				this.page = this.page + 1;
				this.goodsfun(this.page)
			},

			emitFun(emit) {
				this.selectedMenu = emit; // 更新当前选中的菜单项ID
				console.log('父组件中接受到的选中菜单：', emit)
				this.searchKeyword = '';
				if (emit.levelTitle) {
					this.routes[2].name = emit.levelTitle
					this.routes[3] = {
						to: "",
						name: emit.title,
					}

				} else {
					this.routes[2].name = emit.title
				}
				this.relatedGoodsFun(emit)
			},
			// 搜索
			changePassword(val) {
				// this.selectedMenu = '';
				this.$refs.treeMenu.search();
				if (val) {
					//查询相关产品
					relatedGoods({
						searchKeyword: val
					}).then((data) => {
						console.log('模糊查询产品数据：', data)
						this.products = data;
						this.routes[2].name = '搜索“' + val + '”结果'
						if (this.routes[3]) {
							this.routes.pop();
						}
					}).catch((err) => {
						console.log('err::::', err)
					})
				} else {
					this.routes[2].name = '产品列表'
					if (this.routes[3]) {
						this.routes.pop();
					}
					this.noMoreData = false;
					this.page = 1;
					this.goodsfun(this.page)
				}

			},
		}
	}
</script>

<style scoped>
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
	.product-category-list{width:100%;height:800px;overflow: auto;overflow: auto; /* 或 scroll */
  scrollbar-width: none; /* Firefox: 隐藏滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge 兼容 */}
	.product-category-title label{float:left;margin-left:10px;height:30px;line-height:30px;}
	.product-category-title{float:left;line-height:30px;height:30px;font-size:14px;font-weight:bold;margin-top:10px;}
	.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	.product-param label span:last-child{width:calc(100% - 1rem);}
	.product-param label span:first-child{width:6px;height:6px;border-radius: 50%;background:#666;margin-left:.3rem;margin-right:.3rem;margin-top:.5rem;}
	.product-param label span{float:left;color:#666;}
	.product-button:hover{background:#d9001b;color:#fff;}
	.product-button{width:80%;margin-left:10%;height:2rem;line-height:2rem;background:#f5f5f5;border:1px solid #eee;border-radius: 1rem;font-size:.8rem;text-align: center;margin-bottom:.5rem;margin-top:.5rem;color:#666;}
	.product-param label{float:left;width:100%;line-height:1.5rem;font-size:.8rem;color:#444;}
	.product-param{width:94%;margin-left:2%;height:4.8rem;overflow: hidden;margin-top:.2rem;}
	.product {
		width: 100%;
		/* height: 100%; */
		min-height: 800px;
		/* overflow: hidden; */
		background-color: #F5F5F5;
	}

	.product_center {
		/* width: 1360px; */
		min-width: 1360px;
		/* height: 100%; */
		margin: 0 auto;
		display: flex;
		/* overflow-y: auto; */
		/* overflow-x: hidden; */
	}

	/* 左侧部分 */
	.product_center_menu {
		/* width: 180px; */
		height: 100%;
		width: 230px;
		min-width: 230px;
		background-color: #FFF;
		max-width: 400px;
		box-sizing: border-box;
		position: fixed;
		top: 110px;
		left: 0;
		z-index: 99;
		border-radius: 10px;
	}

	/* 滚动条整体样式 */
	.product_center_menu::-webkit-scrollbar {
		width: 2px;
		/* 纵向滚动条宽度 */
		height: 5px;
		/* 横向滚动条高度 */
	}

	/* 滚动条轨道 */
	.product_center_menu::-webkit-scrollbar-track {
		background: #f8f8f8;
		border-radius: 4px;
	}


	/* 右侧部分 */
	.container {
		/* height: 100%; */
		/* flex: 1; */
		/* width: 100%; */

		width: calc(100vw - 252px - 20px);
		margin-top: 20px;
		margin-left: 252px;
		position: relative;
		top: 0;
		left: 0;
		background-color: #FFF;
		border-radius: 10px;

	}

	.search {
		/* width: 80%; */
		width: calc(100vw - 252px - 20px);
		/* margin: 20px; */
		height: 74px;
		position: fixed;
		top: 110px;
		right: 15px;
		z-index: 99;
		background-color: #FFF;
		padding: 0 20px;
		box-sizing: border-box;
		border-radius: 10px;
		/* position: fixed; */
	}

	.searchCeiling {
		top: 90px;
	}

	.breadcrumb {
		width: 100%;
		height: 74px;
	}

	.breadcrumb /deep/ .uni-breadcrumb {
		padding: 20px;
	}

	.search-bar {
		/* width: 360px; */
		width: 300px;
		height: 40px;
		/* margin-bottom: 20px; */
		display: flex;
		align-items: center;
		position: absolute;
		top: 16px;
		right: 80px;

	}

	.search-imput {
		width: 100%;
		height: 100%;
		position: relative;
		top: 0;
		left: 0;
	}

	.search-bar input {
		flex: 1;
		height: 40px;
		padding: 10px 60px 10px 10px;
		border: 1px solid #ddd;
		/* border-right: 0px solid #ddd; */
		border-radius: 4px;
		font-size: 14px;
		box-sizing: border-box;
	}

	.search-icons {
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24px !important;
		/* background-color: #e5e5e5; */
		border-radius: 0 6px 6px 0;
		cursor: pointer;
	}

	/* .search-bar button {
		height: 40px;
		background-color: #d9001b;
		color: #FFF;
		border-radius: 0 4px 4px 0;
		font-size: 15px;
		line-height: 40px;
	} */

	.scroll-container {
		min-height: 100%;
		max-height: 800px;
		/* border: 1px solid #eee; */
	}

	.product-list {
		width: 100%;
		min-height: 714px;
		display: flex;
		flex-wrap: wrap;
		margin: 66px auto 20px;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.product-item {
		width: calc(1360px/6 - 25px);
		min-width: 190px;
		/* height: 290px; */
		height: 375px;
		margin: 10px;
		background-color: white;
		border-radius: 4px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		position: relative;
		top: 0;
		left: 0;
		transition: transform 0.3s ease;
		cursor: pointer;
	}

	.product-item:hover {
		transform: translateY(-10px);
	}

	.noData {
		width: 100%;
		/*float: left;
		margin-top: 200px;
		text-align: center; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.noData text {
		font-size: 14px;
		margin-top: 10px;
		color: #999;
	}

	.noDataImg {
		width: 70px;
		height: 70px;

	}

	.product-new {
		position: absolute;
		top: 0;
		right: 0;
		color: #FF7400;
		font-size: 30px;
		z-index: 9;
	}

	.xinpin_text {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 10px;
		line-height: 20px;
		color: #FFF;
		transform: rotate(45deg);
	}

	.product-image {
		width: 100%;
		height: 200px;
		/* padding: 10px; */
		box-sizing: border-box;
		object-fit: cover;
	}

	.product-info {
		/* height: 86px; */
		height: 54px;
		padding: 10px;
		box-sizing: border-box;
	}

	.product-name {
		height: 25px;
		font-size: 14px;
		font-weight: 500;
		color: #333;
		padding-bottom: 5px;
		box-sizing: border-box;

		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-price {
		/* color: #d9001b; */
		font-size: 16px;
		height: 32px;
		display: inline-block;
		width: 100%;
	}

	.product-textL {
		/* padding-top: 6px; */
		display: inline-block;
		color: #FF7400;
		font-size: 18px;
		font-weight: 700;
	}

	.product-textL text {
		font-size: 12px;
		display: inline-block;
	}

	.product-textR {
		float: right;
		padding-right: 10px;
		font-size: 20px;
		/* color: #FF7400; */
		color: #d9001b;
	}

	.loading {
		text-align: center;
		padding: 0 0 70px 0;
		color: #999;
	}

	.no-more-data {
		text-align: center;
		padding: 0 0 70px 0;
		color: #999;
	}

	/* 弹窗 */
	.page-container {}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}


	.modal-content {
		background-color: white;
		width: 80%;
		height: 640px;
		max-width: 1100px;
		border-radius: 5px;
		overflow: hidden;
	}

	.popup-header {
		position: relative;
		top: 0;
		left: 0;
		font-size: 16px;
		font-weight: 600;
		padding: 10px 20px;
		/* background: #f5f5f5; */
		border-bottom: 2px solid #d9001b;
	}

	.close {
		width: 24px;
		height: 24px;
		position: absolute;
		top: 8px;
		right: 10px;
		font-size: 14px;
		line-height: 24px;
		text-align: center;
		color: #666;
		cursor: pointer;
	}

	/* 弹窗结束 */
</style>